<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-25 17:22:34
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-08 22:38:31
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>

<body>
    <div class="logo">
        <img src="../img/logo.png" alt="">
    </div>
    <!-- 注册表单 -->
    <form action="#">
        <span id="tip" class="tip">用户名不能为空</span>
        <input value="" id="username" name="name" type="text" placeholder="请输入用户名">
        <div for="gender" id="gender-box" class="gender">
            性别：
            <input type="radio" id="men" checked name="gender" value="1">
            <label for="men">男</label>
            <input type="radio" id="women" name="gender" value="0">
            <label for="women">女</label>
        </div>
        <input value="" id="password" name="password" type="text" placeholder="请输入密码">
        <input value="" id="repassword" name="repassword" type="text" placeholder="请再次输入密码">
        <div id="phonenum-box" class="phone-num">
            <select name="prefix-num" id="prefixNum">
                <option value="86">+86</option>
                <option value="86">+85</option>
                <option value="86">+84</option>
                <option value="86">+83</option>
            </select>
            <input value="" id="phonenum" name="phonenum" type="number" placeholder="手机号码">
        </div>
        <div class="captcha">
            <input type="text" id="captcha" name="captcha" placeholder="验证码">
            <a href="#">获取验证码</a>
        </div>
        <button type="button" id="submit" class="submit btn">注册</button>
    </form>
    <div class="bottom">注册即代表同意<a href="#">《本家网络服务协议》</a></div>
</body>

<script>
    let doc = document
    let oUsername = doc.querySelector("#username")
    let oPassword = doc.querySelector('#password')
    let oGenderBox = doc.querySelector('#gender-box')
    let oGender = doc.getElementsByName('gender')
    let oRePassword = doc.querySelector('#repassword')
    let oPhoneBox = doc.querySelector('#phonenum-box')
    let oPhone = doc.querySelector('#phonenum')
    let oCaptcha = doc.querySelector('#captcha')
    let oTip = doc.querySelector('#tip')
    let oSubmit = document.querySelector("#submit")
        // let isValid_username = false
        // let isValid_password = false
        // let isValid_repassword = false
        // let isValid_phone = false
        // let isValid_captcha = false
        // let isValid_gender = false

    oUsername.addEventListener('blur', checkUsername)
    oGenderBox.addEventListener('click', checkGender)
    oPassword.addEventListener('blur', checkPassword)
    oRePassword.addEventListener('blur', checkRePassword)
    oPhone.addEventListener('blur', checkPhone)

    // 用户名验证
    function checkUsername() {
        let username = oUsername.value.trim()
        if (!username) {
            openTip("用户名不能为空")
            oUsername.classList.add('error')
            return false
        }
        if (username.length > 20) {
            oUsername.classList.add('error')
            openTip("用户名最多20个字符")
            return false
        } else {
            oUsername.classList.add('success')
            return true
        }
    }

    // 性别验证
    function checkGender() {
        let gender
        oGender.forEach((item) => {
            if (item.checked) {
                gender = item.value
            }
        })
        console.log(gender);
    }
    // 密码验证
    function checkPassword() {
        let password = oPassword.value.trim()
        if (!password) {
            openTip("密码不能为空")
            oPassword.classList.add('error')
            return false
        }
        let reg = /([0-9]|[A-z]){6,14}$/
        let isValid = reg.test(password)

        if (!isValid) {
            oPassword.classList.add('error')
            openTip("密码为6到14位 英文字母 和 数字 的组合")
            return false
        } else {
            oPassword.classList.add('success')
            return true
        }
    }

    // 再次密码验证
    function checkRePassword() {
        let password = oRePassword.value.trim()
        if (!password) {
            openTip("请再次输入密码")
            oRePassword.classList.add('error')
            return false
        }

        if (!(password === oPassword.value.trim())) {
            oRePassword.classList.add('error')
            openTip("两次密码输入不一致")
            return false
        } else {
            oRePassword.classList.add('success')
            return true
        }

    }

    // 手机号验证
    function checkPhone() {
        let phone = oPhone.value
        if (!phone) {
            openTip("手机号码不能为空")
            oPhoneBox.style.borderColor = '#CB2634'
            return false
        }

        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        let isValid = reg.test(phone)

        if (!isValid) {
            oPhoneBox.style.borderColor = '#CB2634'
            openTip("手机号错误")
            return false
        } else {
            oPhoneBox.style.borderColor = '#00b42a'
            return true
        }
    }

    // 注册按钮
    oSubmit.addEventListener('click', () => {
        if (checkUsername() && checkPassword() && checkRePassword() && checkPhone()) {
            console.log('success');
        } else {

        }
    })

    // 提示
    function openTip(text) {
        oTip.style.display = 'inline-block'
        oTip.innerText = text
        console.log(text);
        setTimeout(() => {
            oTip.style.display = 'none'
        }, 3000)
    }



    function getUser() {
        // 1.创建 XHR 对象
        let xhr = new XMLHttpRequest();

        // 2. 调用 open 函数，指定 请求方式 与 URL 地址
        xhr.open('GET', '../js/user.json')

        // 3. 调用 send 函数，发送 Ajax 请求
        xhr.send()

        // 4. 监听 onreadystatechange 事件
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log(xhr.responseText);
            }
        }
    }

    function register() {
        let userObj = {
            name: '张三',
            pwd: '123123'
        }
        let userJson = JSON.stringify(userObj)
            // console.log(userJson);
        let xhr = new XMLHttpRequest()
        xhr.open("POST", '../js/user.json')
        xhr.setRequestHeader('Content-type', 'application/json;charset-UTF-8')
        xhr.send(userJson)
        xhr.onreadystatechange = function() {
            console.log(this.status);
        }
    }
    // register()
</script>

<style>
    body {
        padding: 0 5vw;
    }
    
    form {
        margin-top: 17vw;
        text-align: center;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    form .tip {
        position: absolute;
        background: #1d2129;
        color: #fff;
        width: auto;
        padding: 2.8vw 5.6vw;
        top: 40%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        animation: fadeInOut 3s ease-out;
        animation-fill-mode: forwards;
        display: none;
        border-radius: 1.33vw;
    }
    
    .error {
        border-color: #CB2634;
    }
    
    .success {
        border-color: #00b42a;
    }
    
    @keyframes fadeInOut {
        0% {
            opacity: 0;
        }
        20%,
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    form .gender {
        width: 100%;
        text-align: left;
        margin-bottom: 5vw;
        font-size: 4vw;
        line-height: 4vw;
        color: #777777;
    }
    
    form .gender>label {
        padding: 0 3vw 0 2vw;
    }
    
    form>input {
        width: 100%;
        height: 11vw;
        box-sizing: border-box;
        margin-bottom: 5vw;
        text-indent: 3vw;
        border: 1px solid var(--border-color);
        font-size: 4vw;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0vw;
        color: #000000;
        position: relative;
    }
    
    .submit {
        text-indent: 0;
        color: #fff;
        width: 100%;
        background: var(--primary-color);
        border: none;
        height: 14vw;
        border-radius: 1vw;
        margin-top: 5vw;
        font-size: 4vw;
        font-weight: bold;
        letter-spacing: 0vw;
    }
    
    form .phone-num {
        width: 100%;
        height: 11vw;
        border: solid .1vw #b7b7b7;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    form .phone-num>select {
        width: 16vw;
        padding-left: 1vw;
        font-size: 4vw;
        font-weight: normal;
        height: 100%;
        font-stretch: normal;
        letter-spacing: 0vw;
        color: #777777;
        border: none;
    }
    
    form .phone-num>input {
        width: calc(100% - 18vw);
        font-size: 4vw;
        height: 100%;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0vw;
        color: #777777;
        border: none;
    }
    
    form .captcha {
        width: 100%;
        display: flex;
        margin-top: 5vw;
        justify-content: space-between;
        align-items: center;
    }
    
    form .captcha>input {
        box-sizing: border-box;
        width: 61vw;
        height: 11vw;
        text-indent: 3vw;
        border: 1px solid var(--border-color);
        font-size: 4vw;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0vw;
        color: #777777;
    }
    
    form .captcha>a {
        display: inline-block;
        width: 26vw;
        height: 11vw;
        border: solid .1vw #b7b7b7;
        font-size: 4vw;
        line-height: 11vw;
        font-weight: normal;
        box-sizing: border-box;
        font-stretch: normal;
        letter-spacing: 0vw;
        color: #777777;
    }
    
    .bottom {
        position: absolute;
        bottom: 5vw;
        font-size: 3vw;
        left: 24vw;
        text-align: center;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0vw;
        color: #999999;
    }
    
    .bottom a {
        text-decoration: underline;
        color: #999999;
        margin: 0 1vw;
    }
</style>


</html>

</html>

</html>

</html>